<template>
  <el-container class="home_container">
    <el-header>
      <div class="logo">
        <img src="~assets/logo.png" alt="" width="80" height="60">
        <span>电商管理平台</span>
      </div>
      <div class="loginout">
        <el-button @click="loginOut">退出</el-button>
      </div>
    </el-header>
    <el-container>
      <el-aside :width="!isCollapse?'200px':'60px'" :style="{overflow:'hidden'}">
        <el-col>
          <div style="color:#fff;background:rgb(74, 80, 100);cursor: pointer;text-align:center;"
          @click="isCollapse=!isCollapse">|||</div>
          <el-menu
            :default-active="activePath"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            :unique-opened="true"
            :router="true"
            style="width:100%"
            :collapse="isCollapse"
            :collapse-transition="false"
            >
            <el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
              <template slot="title">
                <i :class="objIcon[item.id]"></i>
                <span>{{item.authName}}</span>
              </template>
               <el-menu-item :index="'/'+item2.path"  v-for="item2 in item.children" :key="item2.id" @click="changeActive('/'+item2.path)">
                  <i class="el-icon-menu"></i>
                  <span slot="title">{{item2.authName}}</span>
                </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-col>
      </el-aside>
      <el-container>
        <el-main>
              <!-- <el-button @click="getMenuList">退出</el-button> -->
              <router-view></router-view>
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
// @ is an alias to /src


export default {
  name: 'Home',
  components: {
    
  },
  data(){
    return{
      menuList:[],
      //匹配icon图标
      objIcon:{
        "125":"iconfont icon-icon_user",
        "103":"iconfont icon-shangpin",
        "101":"iconfont icon-danju",
        "102":"iconfont icon-tijikongjian",
        "145":"iconfont icon-baobiao"
      },
      isCollapse:false,
      activePath:''
    }
  },
  mounted(){
    this.getMenuList();
    this.activePath = window.localStorage.getItem('path')
  },
  methods:{
    loginOut(){
      window.sessionStorage.removeItem('token');
      this.$router.push('/');
    },
    async getMenuList(){
      let {data:res} = await this.$http.get('menus')
      if(res.meta.status!==200){
        this.$message.error("请求菜单失败!")
      }
      this.menuList = res.data;

    },
    changeActive(path){
      window.localStorage.setItem('path',path);
      this.activePath = path;
      console.log(this.activePath)
    },
    // 点击二级菜单,激活当前index值
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<style lang="less" scoped>
.home_container{
  height: 100%;
}
.el-header{
  background-color: rgb(55,61,65);
  display: flex;
  justify-content: space-between;
  .logo{
    // 将文字与图片水平居中
    img{
      vertical-align: middle;
    }
    font-size: 22px;
    color: #fff;
  }
  // 将按钮垂直水平居中
  .loginout{
    display: flex;
    align-items: center;
  }
}
.el-aside{
  background-color: rgb(51,55,68);
}
.el-main{
  background-color: rgb(234,237,241);
}
</style>

